<template>
    <div>
      <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
        <div class="iconfont detail-back">&#xe624;</div>
      </router-link>
      <div
        class="header-fiexd"
        v-show="!showAbs"
        :style="opacityStyle"
      >
        <router-link to="/">
          <div class="iconfont back-fiexd-icon">&#xe624;</div>
        </router-link>
        景点详情
      </div>
    </div>
</template>

<script>
    export default {
        name:'DetailHeader',
        data(){
            return {
              showAbs:true,
              opacityStyle:{
                    opacity:0
              }
            }
        },
        activated(){
          window.addEventListener('scroll',this.handleScroll)
        },
        methods: {
          handleScroll(){
              const top = document.documentElement.scrollTop
              if(top>60){
                let opacity = top/140
                opacity = opacity>1 ? 1:opacity
                this.opacityStyle = {opacity}
                this.showAbs = false
              }else{
                this.showAbs = true
              }
          }
        },
        deactivated(){
          window.removeEventListener('scroll',this.handleScroll)
        }
    }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .header-abs
    position: absolute
    left: .2 rem
    top: .2rem
    width: .8rem
    height: .8 rem
    background: rgba(0,0,0,.6)
    text-align: center
    line-height:.8rem
    border-radius:.4rem
    .detail-back
      color: #fff
      font-size: .4rem
  .header-fiexd
    z-index:2
    position: fixed
    top: 0
    left: 0
    right:0
    header:$headerHeight
    line-height $headerHeight
    text-align: center
    color: #ffffff
    background: $bgColor
    .back-fiexd-icon
      position: absolute
      width:0.64rem
      text-align center
      font-size:0.4rem
      color: #fff
      top:0
      left:0
</style>

